<template>
	<div>
		<form action="" @submit.prevent="registerUser">
			<div class="title">{{ title }}</div>
			<div class="form-group" v-for="(item, index) in formConfig" :key="index">
				<span class="span-img">
					<img :src="item.iconUrl" alt class="icon">
				</span>
				<input
					:type="item.type"
					:name="item.name"
					:placeholder="item.placeholder"
					class="input-border"
					v-model="formData[item.name]"
				/>
			</div>
			<slot name="formExtends">
				<div class="do-extra">
					<router-link to="/register">注册</router-link>
					<router-link to="/user/forgetPassword">忘记密码?</router-link>
				</div>
				<div class="form-group">
					<input type="checkbox" name class="che">
					<span class="rem">记住我的登录信息</span>
				</div>
			</slot>
			<div class="form-group">
				<button class="btn" type="submit">
					<!-- 插槽 -->
					<slot>马上登录</slot>
				</button>
			</div>
		</form>
	</div>
</template>

<script>
import request from "../../plugins/axios";
export default {
	// form-config [{},{}]
	props: ["form-config", "title"],
	data() {
		return {
			formData: {
				username: "",
				userpassword: "",
				usertype: 1,
				userphone: "",
				sseridentity: "130323200203173224"
			}
		}
	},
	methods: {
		registerUser() {
			console.log(this.formData) 
			// 1. 获取数据
			const formData = new FormData(); // 提交表单数据
			// formData.append("username", this.formData.username);
			// formData.append("userpassword", this.formData.userpassword);
			// formData.append("usertype", this.formData.usertype);
			// formData.append("userphone", this.formData.userphone);
			// formData.append("sseridentity", this.formData.sseridentity);
			for(var key in this.formData) {
				formData.append(key,formData[key]);
			}
			// 2. 发送数据给服务器实现注册
			request.post("/system/sqUserlogin/userregister", formData).then((res) => {
				console.log(res);
			})
		},
	},
};
</script>

<style scoped>
form .title {
	text-align: center;
	color: #033887;
	font-size: 20px;
}

.icon {
	width: 17px;
	height: 17px;
}
.form-group {
	position: relative;
	margin-top: 15px;
}
.form-group .span-img {
	position: absolute;
	left: 1px;
	top: 1px;
	width: 28px;
	height: 28px;
	background-color: #033887;
	text-align: center;
	line-height: 30px;
}
.form-group .input-border {
	width: 300px;
	height: 30px;
	/* margin-top: 15px; */
	background-color: #e8f6fe;
	border: 1px solid #9f9f9f;
	padding-left: 33px;
}
.do-extra {
	display: flex;
	justify-content: space-between;
}
.do-extra a {
	color: black;
	text-decoration: none;
	margin-top: 10px;
}
.che {
	border: 1px solid skyblue;
}
.rem {
	margin-left: 5px;
}
.btn {
	color: #e8f6fe;
	width: 100%;
	height: 40px;
	border: none;
	border-radius: 8px;
	background-color: #033887;
	padding: 5px 0;
	margin-top: 25px;
	box-shadow: 3px 3px 10px #444;
}
</style>

